<!-- 界面输入窗体 -->
<template>
  <div class="tab3">
    <!-- 按纽栏组件 -->
    <div class="button-group">
      <a-button type="primary" icon="export" class="icon-button">导入</a-button>
      <a-button type="primary" icon="plus" @click="clickButton('add')" class="icon-button">新增</a-button>
      <a-button icon="edit" @click="clickButton('edit')" class="icon-button">编辑</a-button>
      <a-button icon="delete" @click="clickButton('del')" class="icon-button">删除</a-button>
    </div>
    <!-- 界面输入窗体表格 -->
    <el-table
      :data="tab3TableData"
      highlight-current-row
      border
      height="calc(100% - 42px)"
      :row-style="{height:'40px'}"
      :cell-style="{padding:'0px'}"
      :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <pre>{{ props.row }}</pre>
        </template>
      </el-table-column>
      <slot v-for="(item,index) in tab3Columns">
        <el-table-column
          :key="index"
          :property="item.field"
          :label="item.title"
          :width="item.width"
          show-overflow-tooltip
          sortable>
        </el-table-column>
      </slot>
    </el-table>

    <!-- 界面输入窗体弹出框 -->
    <a-modal
      :maskClosable="false"
      :title="modalEWTitle"
      v-model="dialogEWVisible"
      @ok="handleOk"
      width="60%">
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        :form="form">
        <a-row>
          <a-col :span="12">
            <a-form-item label="版本号">
              <a-input v-decorator="[ 'EW_Version' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="说明">
              <a-input v-decorator="[ 'EW_Remark' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="字段名">
              <a-input v-decorator="[ 'EW_FieldName' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="指定值">
              <a-input v-decorator="[ 'EW_FieldValue' ]" />
            </a-form-item>
          </a-col>
          <a-form-item
            label="窗体代码"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 21 }">
            <div class="cm-container" style="border: #E4E7ED solid 1px;">
              <codemirror
                v-model="modalFormData.EW_Det"
                :options="editorOption"
                ref="myEditor">
              </codemirror>
            </div>
          </a-form-item>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror-lite'
require('codemirror/mode/vue/vue')
export default {
  name: '',
  components: {
    codemirror
  },
  data () {
    return {
      tab3TableData: [
        {
          EW_Version: '1.0',
          EW_Remark: ''
        }
      ],
      tab3Columns: [
        {
          title: '版本号',
          field: 'EW_Version'
        },
        {
          title: '说明',
          field: 'EW_Remark'
        }
      ],
      dialogEWVisible: false,
      modalEWTitle: '',
      form: this.$form.createForm(this),
      modalFormData: {
        EW_Det: ''
      },
      editorOption: { // 代码编辑框配置
        mode: 'vue',
        tabSize: 2,
        lineNumbers: true,
        lineWrapping: true,
        extraKeys: { 'Ctrl-Space': 'autocomplete' }
      }
    }
  },
  created () {},
  mounted () {},
  methods: {
    clickButton (val) {
      switch (val) {
        case 'add':
          this.modalEWTitle = '新增窗体'
          this.dialogEWVisible = true
          break
        case 'edit':
          this.modalEWTitle = '编辑窗体'
          this.dialogEWVisible = true
          break
        case 'del':
          var this_ = this
          this.$confirm({
            title: '提示',
            content: '此操作将永久删除该文件, 是否继续?',
            okText: '确认',
            cancelText: '取消',
            onOk () {
              this_.$message.success('删除成功')
            }
          })
          break
        default:
          break
      }
    },
    handleOk () {}
  }
}
</script>

<style lang="less" scoped>
.tab3 {
  height: 100%;
  padding: 15px;
  .button-group {
    margin-bottom: 10px;
  }
}
</style>
